<template>
	<view class="box" style="padding: 20rpx;">
	  <!-- 标题区域 -->
	  <view style="text-align: center; font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx;">
	    以下是我的就诊记录
	  </view>

	  <!-- 就诊记录列表 -->
	  <view v-for="item in data.visitList" :key="item.id" style="margin-bottom: 20rpx; padding: 20rpx; background-color: #f9f9f9; border-radius: 10rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);">
	    <!-- Flex 布局，显示就诊信息 -->
	    <view style="display: flex; align-items: center; justify-content: space-between;">
	      <!-- 就诊信息：医生姓名、就诊时间、诊断结果 -->
	      <view style="display: flex; align-items: center; flex-grow: 1;">
	        <view style="margin-left: 20rpx;">
	          <text style="font-size: 28rpx; font-weight: bold; color: #333333;">医生：{{item.doctorName}}</text>
	          <text style="display: block; font-size: 24rpx; color: #666666; margin-top: 10rpx;">叫号时间：{{item.createdTime}}</text>
	          <text style="display: block; font-size: 24rpx; color: #666666; margin-top: 10rpx;">诊断：{{item.diagnosis}}</text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup>
	import { reactive } from "vue"
	import { getMyVisitsApi } from "../../../utils/api/appointments"

	// 定义响应式数据
	const data = reactive({
		visitList: [],
		user: uni.getStorageSync('system-user'), // 获取当前用户信息
	})

	// 加载就诊记录
	const load = () => {
		getMyVisitsApi({ patientId: data.user.id }).then(res => {
			if(res.code === '200') {
				console.log(res)
				uni.showToast({
					title: '获取成功',
					icon: 'success',
					duration: 1000
				})
				data.visitList = res.data?.list
			}
			else {
				uni.showToast({
					title: '获取失败',
					icon: 'error',
					duration: 1000
				})
			}
		})
	}

	// 页面加载时调用加载函数
	load()

</script>

<style>
	.box {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
	}
</style>
